<script setup lang="ts">
import {ref} from "vue";
import {useUserStore} from "@/store/modules/user.ts";
import {} from '@/api/user/type.ts'
const useStore = useUserStore()

const loginForm = ref({
  username: 'admin',
  password: '123456'
})

function login() {
  console.log('登录')
  useStore.userLogin(loginForm.value)
}

let content = ref('');
const contentArr = [
  '人生没有彩排，每一天都是现场直播。',
  '勇敢面对挑战，坚定信念，你的人生必将精彩无限。',
  '梦想不会逃跑，逃跑的永远是没有勇气追寻的人。',
  '每一个努力的背后，必有加倍的赏赐。',
  '梦想不会逃跑，逃跑的永远是不坚持的人。',
]
content.value = contentArr[0]

function updateContent(index: number) {
  let i = 0;
  const timer = setInterval(() => {
    const str = contentArr[index];
    content.value = str.slice(0, i);
    if (i < str.length) {
      i++;
    } else {
      // 当打印完一个字符串后，清除定时器
      clearInterval(timer);
      // 设置一个5秒的延时，之后继续下一个字符串
      setTimeout(() => {
        if (index >= contentArr.length - 1) {
          // 如果是最后一个字符串，则重置index
          index = 0;
        } else {
          // 否则移动到下一个字符串
          index++;
        }
        // 重新开始打印下一个字符串
        updateContent(index);
      }, 5000);
    }
  }, 110);
}

updateContent(0)

</script>

<template>
  <div class="container">
    <div class="title">
      <h1>hello</h1>
    </div>
    <div class="content-container">
      <div class="content">
        <div class="inner-text">
          <span class="motto-text" v-html="content"></span>
          <span class="cursor-blinking">_</span>
        </div>
        <el-form
            label-position="left"
            ref="loginFormRef"
            :model="loginForm"
            label-width="auto"
            class="login-form"
            status-icon
        >
          <el-form-item
              prop="username"
              :rules="[{ required: true, message: '', trigger: 'blur' }]"
          >
            <el-input prefix-icon="user" v-model="loginForm.username" placeholder="请输入用户名"/>
          </el-form-item>
          <el-form-item
              prop="password"
              :rules="[{ required: true, message: '', trigger: 'blur' }]"
          >
            <el-input prefix-icon="lock" type="password" v-model="loginForm.password" placeholder="请输入密码"/>
          </el-form-item>
          <el-button class="login-button" @click="login">登录</el-button>
        </el-form>
        <div class="circle-dot"></div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>

.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: $primary-background; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  .title {
    position: absolute;
    right: 0;
    padding: 20px;
  }

  .content-container {
    position: absolute;
    top: -30%;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 600px;
    height: fit-content;

    border-radius: 60px;
    overflow: hidden;
    padding: 5px;

    .content {
      border-radius: 60px;
      backdrop-filter: blur(100px);
      background-color: rgba(224, 194, 194, 0.1);
      padding: 50px;
    }

    .motto-text {
      white-space: nowrap;
    }

    .inner-text {
      font-size: 20px;
      color: white;
      text-align: center;
    }

    .login-form {
      padding: 20px;
      margin: 0 auto;
      width: 300px;

      :deep(.el-form-item__label) {
        color: white;
      }

      .login-button{
        display: block;
        margin: 0 auto;
        width: 50%;
        position: relative;
        overflow: hidden;
        background-color: #dab3ed;

        &:after{
          content: '';
          height: 100%;
          width: 100%;
          display: block;
          background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
          position: absolute;
          top: 0;
          right: 0;
          transform: rotate(-45deg);
          animation: right-left-move 4s ease  infinite;

          @keyframes right-left-move {
            from {
              /* CSS样式 */
              left: -300px;
            }
            to {
              /* CSS样式 */
              left: 300px;
            }
          }
        }
      }
    }
  }

  .circle-dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 120px;
    border-radius: 60px;
    animation: moveAround 8s linear infinite;
    transform: translate(-60px, -60px);
    background-image: radial-gradient(rgba(203, 172, 249, 100) 10%,transparent 60%);

    @keyframes moveAround {
      0%,
      100% {
        top: 0;
        left: 0;
      }
      33.33% {
        top: 0;
        left: 100%;
      }
      50% {
        top: 100%;
        left: 100%;
      }
      83.33% {
        top: 100%;
        left: 0;
      }
    }
  }
}

.cursor-blinking {
  opacity: 1;
  animation: blink 1s linear infinite;

  @keyframes blink {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}


</style>